import React, {useContext, useEffect, useState} from 'react';
import { withRouter } from 'react-router-dom'
import './List.css'
import {message} from "antd";
import ava from "../../assets/img/i.png"
import {RoleContext} from "../../App";
import {post} from "../../utils/post";

const List=(props)=> {
    const [img,setImg]=useState('')
    const [username,setUsername]=useState('')
    const [isLogin,changeLogin]=useState(false)
    const {role,setRole} = useContext(RoleContext)
    useEffect(()=>{
        const TOKEN = localStorage.getItem('TOKEN')
        if(TOKEN)   changeLogin(true);
        const userData = JSON.parse(localStorage.getItem('USERDATA'))
        setUsername(userData?userData.nickname:'开摆的访客');
        setImg(userData?(userData.avatar?userData.avatar:ava):ava);
    },[props])
    const renderList = [
        {
            meun: '首页',
            iconfont: "iconfont icon-home",
            id: 1,
            path: '/index'
        },
        {
            meun: '我的收藏',
            iconfont: "iconfont icon-star",
            id: 2,
            path: '/index/favor'
        },
        {
            meun: '我的分享',
            iconfont: "iconfont icon-list",
            id: 3,
            path: '/index/mine'
        },
        {
            meun: '管理员入口',
            iconfont: "iconfont icon-admin",
            id: 4,
            path: '/admin'
        }
    ]
    const myGreetings=()=>{
        const time=new Date().getHours()
        if(time<6||time>=18) return '晚上好'
        else if(time>=6&&time<11)   return '早上好'
        else if(time>=11&&time<14)  return '中午好'
        else return '下午好'
    }
    const renderMenu=()=> {
        if(isLogin)
        return renderList.map(item =>
            (<div className="item" key={item.id} onClick={()=> {
            //    if(role==='ADMIN'||item.id!==4)
            let role = JSON.parse(localStorage.getItem('USERDATA')).roles[0]
            if(role==='ADMIN'||item.id!==4)
                props.history.push({
                    pathname:`${item.path}`,
                    state:{
                        isMine:true
                    }
                })
               else message.error('对不起，您还不够摆，需要升级您的账户')
            }}>
                <div className="light"></div>
                <div className="licon"><span className={item.iconfont}></span></div>
                <div className="con">{item.meun}</div>
                <div className="ricon"></div>
            </div>
        )
        )
        else{
            return (
                <div className="item login-btn" onClick={()=>props.history.replace('/login')}>
                    <div className="light"></div>
                    <div className="licon"><span className={"icon2 icon-login"}></span></div>
                    <div className="con">{'请登录'}</div>
                    <div className="ricon"></div>
                </div>
            )
        }
    }

    const logout = async () => {
        const res = await post('/auth/logout')
        if(res.data.code===0){
            message.info('登出成功')
            props.history.replace('/login')//无法返回
            localStorage.removeItem('TOKEN');
            localStorage.removeItem('USERDATA');
        }
        else
            message.error('登出失败')
    }

    return (
            <div className='wrap'>
                <div className="nav">
                    <div>
                        <div className="icon" >
                            <div className="icon-img">
                                 <img src={img} alt="" />
                           </div>
                            <div className="icon-con">
                                 <p >{myGreetings()}</p>
                            <h2 className='ppp'>{username}</h2>
                            </div>
                        </div>
                    </div>
                    <div className="line"></div>
                    <div className="title">
                        功能
                    </div>
                    <div className="menu">
                        {renderMenu()}
                    </div>
                    <div className="line"></div>
                    <div className="serve">
                        {
                            isLogin && <div className="item">
                                <div className="licon"><span className="iconfont icon-logout"></span></div>
                                <div className="con" onClick={logout}>登出</div>
                                <div className="ricon"><span className="iconfont icon-caidan1"></span></div>
                            </div>
                        }
                    </div>
                </div>
            </div>
        );
}

export default withRouter(List);
